import React, { useEffect } from 'react';
import type {FC} from 'react'
import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { Button, message, Upload,Popover } from 'antd';
import {API_URL,KNOWLEDGE_KEY} from '@/config' 

type IUploadFile ={
    title:string
    extIntro:string
    knowledgeId:string
    data:any
}
const UploadFile:FC<IUploadFile> =(
    {
        title,
        extIntro,
        knowledgeId,
        data
    }
)=>{

    const props: UploadProps = {
      name: 'file',
      action: `${API_URL}/datasets/${knowledgeId}/document/create-by-file`,
      headers: {
        authorization:  `Bearer ${KNOWLEDGE_KEY}`,
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
      data:{data:{"indexing_technique":"high_quality","process_rule":{"rules":{"pre_processing_rules":[{"id":"remove_extra_spaces","enabled":true},{"id":"remove_urls_emails","enabled":true}],"segmentation":{"separator":"###","max_tokens":500}},"mode":"custom"}}}
    };
    
    return(
    <>
        <Upload {...props}>
            <div className='flex items-center'>
                <Popover content={  <div><p>{extIntro}</p></div>} title="" trigger="hover" placement="left">
                  <Button type="primary" shape="circle" icon={<UploadOutlined />}></Button>
                </Popover>
            </div>
        </Upload>
     </>
    )

}

export default UploadFile;